<template>
  <div class="slot-view">
    <!-- 子组件通过slot渲染出来的内容,数据受到子组件控制,但是结构
    是在父组件组装的 -->
    <!-- 作用域插槽就是你可以给插槽标签传递属性.在父作用域中通过v-slot:得到的是
    一个属性的对象集合,这样我们就能够让父级的插槽内容访问子组件中才有的数据 -->
    <!-- 作用域插槽出口 -->
    <slot name="headerTop" :likeSports="likeSports" :likeFood="likeFood"></slot>
    <div>组件固定内容</div>
    <div>组件固定内容</div>
    <!-- 出口 -->
    <!-- 匿名插槽 出口-->
    <slot name="default"></slot>
    <!-- 具名插槽出口 -->
    <slot name="name2"></slot>
    <slot name="name1"></slot>



  </div>
</template>

<script>

export default {
  components: {},
  props: {},
  data () {
    return {
      likeSports: [{ name: "篮球" }, { name: "足球" }, { name: "排球" }],
      likeFood: [
        { name: "红烧肉" },
        { name: "鱼香肉丝" },
        { name: "红烧排骨" },
      ],
    };
  },
  computed: {},
  methods: {},
  created () { },
  mounted () { },
};
</script>
<style scoped>
.slot-view {
  border: 1px solid red;
}
</style>
